<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜鸟导航</title>
    <link rel="stylesheet" href="index.css">
    <script src="../jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="classNav">
        <div class="navTitle">
            <a href="#">
                <img src="./title.png" alt=""> 分类导航
            </a>
        </div>
        <div class="navs">
            <ul>
                <li>
                    <a href="#">HTML/CSS</a>
                    <div class="navLis">
                        <ul class="clearfix">
                            <li>
                                <a href="#">HTML 教程</a>
                            </li>
                            <li>
                                <a href="#">HTML5 教程</a>
                            </li>
                            <li>
                                <a href="#">CSS 教程</a>
                            </li>
                            <li>
                                <a href="#">CSS3 教程</a>
                            </li>
                            <li>
                                <a href="#">Bootstrap3 教程</a>
                            </li>
                            <li>
                                <a href="#">Bootstrap4 教程</a>
                            </li>
                            <li>
                                <a href="#">Font Awesome 教程</a>
                            </li>
                            <li>
                                <a href="#">Font Awesome 教程</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">JavaScript</a>
                    <div class="navLis">
                        <ul class="clearfix">
                            <li><a href="#">JavaScript 教程</a></li>
                            <li><a href="#">HTML DOM 教程</a></li>
                            <li><a href="#">jQUery 教程</a></li>
                            <li><a href="#">AngularJS 教程</a></li>
                            <li><a href="#">AngularJS2 教程</a></li>
                            <li><a href="#">Vue.js 教程</a></li>
                            <li><a href="#">Vue3 教程</a></li>
                            <li><a href="#">React 教程</a></li>
                            <li><a href="#">TypeScript 教程</a></li>
                            <li><a href="">jQuery UI 教程</a></li>
                            <li><a href="">jQuery EasyUI 教程</a></li>
                            <li><a href="">Node.js 教程</a></li>
                            <li><a href="">AJAX 教程</a></li>
                            <li><a href="">JSON 教程</a></li>
                            <li><a href="">Echarts 教程</a></li>
                            <li><a href="">Highchars 教程</a></li>
                            <li><a href="">Google 地图 教程</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">服务端</a>
                    <div class="navLis">
                        <ul class="clearfix">
                            <li><a href="">Python 教程</a></li>
                            <li><a href="">Python2.x 教程</a></li>
                            <li><a href="">Linux 教程</a></li>
                            <li><a href="">Docker 教程</a></li>
                            <li><a href="">Ruby 教程</a></li>
                            <li><a href="">Java 教程</a></li>
                            <li><a href="">C 教程</a></li>
                            <li><a href="">C++ 教程</a></li>
                            <li><a href="">Perl 教程</a></li>
                            <li><a href="">Servlet 教程</a></li>
                            <li><a href="">JSP 教程</a></li>
                            <li><a href="">Lua 教程</a></li>
                            <li><a href="">Rust 教程</a></li>
                            <li><a href="">Scala 教程</a></li>
                            <li><a href="">Go 教程</a></li>
                            <li><a href="">PHP 教程</a></li>
                            <li><a href="">Django 教程</a></li>
                            <li><a href="">Zookeeper 教程</a></li>
                            <li><a href="">设计模式</a></li>
                            <li><a href="">正则表达式</a></li>
                            <li><a href="">Maven 教程</a></li>
                            <li><a href="">Verilog 教程</a></li>
                            <li><a href="">ASP 教程</a></li>
                            <li><a href="">AppML 教程</a></li>
                            <li><a href="">VBScript 教程</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">数据库</a>
                    <div class="navLis">
                        <ul class="clearfix">
                            <li>
                                <a href="#">SQL 教程</a>
                            </li>
                            <li>
                                <a href="#">MySQL 教程</a>
                            </li>
                            <li>
                                <a href="#">PostgreSQL 教程</a>
                            </li>
                            <li>
                                <a href="#">SQLite 教程</a>
                            </li>
                            <li>
                                <a href="#">MongoDB 教程</a>
                            </li>
                            <li>
                                <a href="#">Redis 教程</a>
                            </li>
                            <li>
                                <a href="#">Memcached 教程</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">数据分析</a>
                    <div class="navLis">
                        <ul class="clearfix">
                            <li>
                                <a href="#">Python 教程</a>
                            </li>
                            <li>
                                <a href="#">NumPy 教程</a>
                            </li>
                            <li>
                                <a href="#">Pandas 教程</a>
                            </li>
                            <li>
                                <a href="#">Matplotlib 教程</a>
                            </li>
                            <li>
                                <a href="#">Scipy 教程</a>
                            </li>
                            <li>
                                <a href="#">R 教程</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">移动端</a>
                    <div class="navLis">
                        <ul class="clearfix">
                            <li>
                                <a href="#">Android 教程</a>
                            </li>
                            <li>
                                <a href="#">Swift 教程</a>
                            </li>
                            <li>
                                <a href="#">jQuery Mobile 教程</a>
                            </li>
                            <li>
                                <a href="#">ionic 教程</a>
                            </li>
                            <li>
                                <a href="#">Kotlin 教程</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">XML 教程</a>
                    <div class="navLis">
                        <ul class="clearfix">
                            <li>
                                <a href="#">XML 教程</a>
                            </li>
                            <li>
                                <a href="#">DTD 教程</a>
                            </li>
                            <li>
                                <a href="#">XML DOM 教程</a>
                            </li>
                            <li>
                                <a href="#">XSLT 教程</a>
                            </li>
                            <li>
                                <a href="#">XPath 教程</a>
                            </li>
                            <li>
                                <a href="">XQuery 教程</a>
                            </li>
                            <li>
                                <a href="">XLink 教程</a>
                            </li>
                            <li>
                                <a href="">XPointer 教程</a>
                            </li>
                            <li>
                                <a href="">XML Schema 教程</a>
                            </li>
                            <li>
                                <a href="">XSL-FO 教程</a>
                            </li>
                            <li>
                                <a href="">SVG 教程</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">ASP.NET</a>
                    <div class="navLis">
                        <ul class="clearfix">
                            <li>
                                <a href="#">ASP.NET 教程</a>
                            </li>
                            <li>
                                <a href="#">C# 教程</a>
                            </li>
                            <li>
                                <a href="#">Web Pages 教程</a>
                            </li>
                            <li>
                                <a href="#">Razor 教程</a>
                            </li>
                            <li>
                                <a href="#">MVC 教程</a>
                            </li>
                            <li>
                                <a href="">Web Forms 教程</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">Web Service</a>
                    <div class="navLis">
                        <ul class="clearfix">
                            <li>
                                <a href="#">Web Service 教程</a>
                            </li>
                            <li>
                                <a href="#">WSDL 教程</a>
                            </li>
                            <li>
                                <a href="#">SOAP 教程</a>
                            </li>
                            <li>
                                <a href="#">RSS 教程</a>
                            </li>
                            <li>
                                <a href="#">RDF 教程</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">开发工具</a>
                    <div class="navLis">
                        <ul class="clearfix">
                            <li>
                                <a href="#">Eclipse 教程</a>
                            </li>
                            <li>
                                <a href="#">Git 教程</a>
                            </li>
                            <li>
                                <a href="#">Svn 教程</a>
                            </li>
                            <li>
                                <a href="#">Markdown 教程</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">网站建设</a>
                    <div class="navLis">
                        <ul class="clearfix">
                            <li>
                                <a href="#">HTTP 教程</a>
                            </li>
                            <li>
                                <a href="#">网站建设指南</a>
                            </li>
                            <li>
                                <a href="#">浏览器信息</a>
                            </li>
                            <li>
                                <a href="#">网站主机教程</a>
                            </li>
                            <li>
                                <a href="#">TCP/IP 教程</a>
                            </li>
                            <li>
                                <a href="#">W3C 教程</a>
                            </li>
                            <li>
                                <a href="#">网站品质</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script>
        $(function() {
            $(".navLis>ul>li>a").hover(function() {
                $(this).css({
                    "opacity": 0.7,
                    "text-decoration": "underline"
                });
            }, function() {
                $(this).css({
                    "opacity": 1,
                    "text-decoration": "none"
                });
            })
            $(".navs>ul>li").hover(function() {
                $(this).children("a").css({
                    "color": "#64854c",
                    "text-decoration": "underline"
                })
                $(this).children("div").show();
            }, function() {
                $(this).children("a").css({
                    "color": "",
                    "text-decoration": "none"
                })
                $(this).children("div").hide();
            })
        })
    </script>
</body>

</html>